<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		li{
			list-style: none;
		}
		.list{
			width: 550px;
			margin: 20px auto;
		}
		.list li + li span{
			background: gray;
			float: left;
			width: 200px;
			height: 50px;
			line-height: 50px;
		}
		.list .caozuo, .list .del{
			width: 100px;
			background: orange;
			text-align: center;
			cursor: pointer;
		}
	</style>
</head>
<body>
	<ul class="list">
		<li>
			歌手 <input type="" name="" id="singer">
			歌曲 <input type="" name="" id="song">
			<button>添加</button>
		</li>
		<li>
			<span>歌手</span>
			<span>歌曲</span>
			<span class="caozuo">操作</span>
		</li>
		<li>
			<span>徐蒿</span>
			<span>断桥残雪</span>
			<span class="del">删除</span>
		</li>
		<li>
			<span>徐昊</span>
			<span>如约而至</span>
			<span class="del">删除</span>
		</li>
	</ul>
<script type="text/javascript">
	//写逻辑
	
	//首先获取父级
	let list = document.querySelector(".list")
	//获取歌手,歌曲,按钮
	let singer = document.querySelector("#singer")
	let song = document.querySelector("#song")
	let btn = document.querySelector("button")
	//获取删除
	let del = document.querySelectorAll('.del')

	//添加逻辑
	btn.onclick = function(){
		//判断是否为空
		if(singer.value == '' || song.value == ''){
			alert('不能为空')
		}else{
				//创建li标签以及里面的span标签

		let lis = document.createElement('li')
		let span1 = document.createElement('span')
		let span2 = document.createElement('span')
		let span3 = document.createElement('span')
		//赋值及删除按钮+类名
		span1.innerText = singer.value
		span2.innerText = song.value
		span3.innerText = '删除'
		span3.className = 'del'
		//把span标签放到li标签里面
		lis.appendChild(span1)
		lis.appendChild(span2)
		lis.appendChild(span3)
		//把li标签给ul
		list.appendChild(lis)

		//给span3添加点击事件--删除
		span3.onclick = function(){
			this.parentNode.remove()
		}

		//数据清零
		singer.value = ''
		song.value = ''
	}
	//删除
		for(let i = 0; i < del.length; i++){
			del[i].onclick = function(){
			//this 指的是事件的绑定者---点击的元素
			this.parentNode.remove()
			}
		}

	
	}
	

</script>
</body>
</html>